<template>
  <div>
    <el-button type="danger" @click="$router.back()">返回</el-button>
    <el-collapse class="collapse" v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <el-descriptions class="descriptions">
          <el-descriptions-item label="运输任务编号">
            {{ form.id }}
          </el-descriptions-item>
          <el-descriptions-item label="车牌号码">
            {{ form.truck.licensePlate }}
          </el-descriptions-item>
          <el-descriptions-item label="调度机构">
            {{ form?.startAgency?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="起始地">{{
              form?.startAgency?.name
            }}</el-descriptions-item>
          <el-descriptions-item label="目的地">
            {{ form?.endAgency?.name }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="任务轨迹" name="2">
        <el-descriptions class="descriptions">
          <el-descriptions-item label="车牌号">
            {{ form.truck.licensePlate }}
          </el-descriptions-item>
          <el-descriptions-item label="司机">
            {{ form?.drivers[0]?.name }} {{ form?.drivers[1]?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="计划发车时间">
            {{ form.planDepartureTime }}
          </el-descriptions-item>
          <el-descriptions-item label="实际发车时间">
            {{ form.actualDepartureTime }}</el-descriptions-item
          >
          <el-descriptions-item label="计划到达时间">
            {{ form.planArrivalTime }}
          </el-descriptions-item>
          <el-descriptions-item label="实际到达时间">
            {{ form.actualArrivalTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="货品信息" name="3">
        <el-table :data="form.transportOrders" border style="width: 100%">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="id" label="运单编号"> </el-table-column>
          <el-table-column prop="order.createTime" label="下单时间">
          </el-table-column>
          <el-table-column prop="order.senderName" label="发件人姓名">
          </el-table-column>
          <el-table-column prop="order.senderPhone" label="发件人电话">
          </el-table-column>
          <el-table-column prop="order.senderAddress" label="发件人地址">
          </el-table-column>
          <el-table-column prop="volume" label="货品数量"> </el-table-column>
          <el-table-column prop="volume" label="操作">
            <template #default="{ row }">
              <el-button
                  type="text"
                  size="small"
                  @click="
                  $router.push({
                    path: '/business/waybill-detail',
                    query: {
                      id: row.id,
                    },
                  })
                "
              >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="交付照片" name="4">
        <el-row>
          <el-col :span="6"
          >货品照片
            <el-image
                style="width: 100px; height: 100px"
                :src="form.deliverPicture"
                fit="fit"
            ></el-image
            ></el-col>
          <el-col :span="6"
          >凭证照片
            <el-image
                style="width: 100px; height: 100px"
                :src="form.cargoPickUpPicture"
                fit="fit"
            ></el-image>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="提货照片" name="5">
        <el-row>
          <el-col :span="6"
          >货品照片
            <el-image
                style="width: 100px; height: 100px"
                :src="form.cargoPicture"
                fit="fit"
            ></el-image
            ></el-col>
          <el-col :span="6"
          >凭证照片
            <el-image
                style="width: 100px; height: 100px"
                :src="form.transportCertificate"
                fit="fit"
            ></el-image>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {gettaskdetailApi} from "@/api/task";

export default {
  name: "taskDetail",
  data() {
    return {
      form: {
        id: "",
        truck: "",
        startAgency: "",
        endAgency: "",
        drivers: [],
        planDepartureTime: "",
        actualDepartureTime: "",
        planArrivalTime: "",
        actualArrivalTime: "",
        transportOrders: [],
      },
      tableData: [{}],
      activeNames: ["1", "2", "3", "4", "5"],
    };
  },
  created() {
    this.gettaskManagerInfo();
  },
  methods: {
    async gettaskManagerInfo() {
      const res = await gettaskdetailApi(this.$route.query.id,{o:this.$route.query.id})
      console.log(res)
      this.form=res.data
    },
  },
};
</script>

<style lang="scss" scoped>
.collapse {
  .el-collapse-item {
    .descriptions {
      width: 100%;
      height: 108px;
      background-color: #fff;
      padding: 25px 44px;
    }
    margin-top: 40px;
    .el-collapse-item__header {
      font-size: 16px;
      padding: 20px;
      height: 60px;
      font-weight: 700;
    }
 .el-collapse-item__wrap {
      padding: 24px 44px;
    }
  }
  .jiben {
    i {
      font-size: 14px;
      color: blue;
    }
    span {
      font-size: 16px;
      margin-left: 10px;
    }
  }
  .el-col.el-col-6 {
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
